import React, {
  Component,
  PureComponent, // 自动做优化，如果更改的前的值和更改后的值一致，就直接在shouldComponentUpdate生命周期中返回fasle，停止执行生命周期
} from "react";
import { Button, Card, Table, Popconfirm, message } from "antd";
import "./App.css";
import { apiGetList, apiDelete } from "./api";

class App extends PureComponent {
  state = {
    title: "2208A",
    columns: [
      {
        title: "学生姓名",
        dataIndex: "name",
      },
      {
        title: "性别",
        dataIndex: "sex",
        render: (val) => {
          return <div>{val ? "女" : "男"}</div>;
        },
      },
      {
        title: "学院",
        dataIndex: "college",
      },
      {
        title: "班级",
        dataIndex: "class",
      },
      {
        title: "身份证号",
        dataIndex: "id",
      },
      {
        title: "宿舍号",
        dataIndex: "dorm",
      },
      {
        title: "入学时间",
        dataIndex: "date",
      },
      {
        title: "综合计分",
        dataIndex: "num",
      },
      {
        title: "操作",
        render: (val) => {
          return (
            <div>
              <Popconfirm
                placement="topLeft"
                title="删除"
                description="是否确认删除数据？"
                onConfirm={() => this.deleteList(val)}
                okText="Yes"
                cancelText="No"
              >
                <Button type="link">删除</Button>
              </Popconfirm>

              <Button type="link">详情</Button>
            </div>
          );
        },
      },
    ],
    list: [],
  };

  componentDidMount() {
    this.getList();
  }

  // shouldComponentUpdate(oldProps, oldState) {
  //   console.log(oldState.title)
  //   console.log(this.state.title)
  //   return true
  // }

  componentWillUpdate() {
    console.log("以及确定要执行更改");
  }

  // 删除
  deleteList = (val) => {
    apiDelete({ id: val.id }).then((res) => {
      message.open({
        type: "success",
        content: res.msg,
      });
      // 重新获取数据
      this.getList();
    });
  };

  // 获取列表
  getList = () => {
    apiGetList().then((res) => {
      this.setState({
        list: res.data,
      });
    });
  };

  changeTitle = () => {
    this.setState({
      title: "2208A",
    });
  };

  render() {
    return (
      <div className="public">
        <h1>{this.state.title}</h1>
        <button onClick={this.changeTitle}>更改</button>
        <Card hoverable>
          <Table
            rowKey="id"
            columns={this.state.columns}
            dataSource={this.state.list}
          ></Table>
        </Card>
      </div>
    );
  }
}

export default App;
